<form name="form" novalidate ng-submit="submit(form)">
  <div class="modal-header">
    <h3>{{input.title}}</h3>
  </div>

  <div class="modal-body">
    <!-- name -->
    <div class="form-group" ng-class="{'has-error': form.$submitted && form.name.$invalid}">
      <p>
        {{input.message}}
      </p>
      <p ng-if="input.link">
        Learn more
        <a target="_blank" href="{{input.link}}">
          <i class="fa fa-external-link"></i>
        </a>
      </p>
      <!-- label -->
      <label for="name" class="control-label required-field-label">Name</label>

      <!-- input -->
      <input id="name" name="name" type="text"
             ng-model="input.newName" class="form-control"
             ng-validate="isValid($value)"
             ng-maxlength="64" ng-auto-focus="true" value="{{input.suggestedName}}" required>

      <!-- error -->
      <p class="help-block" ng-show="form.$submitted && form.name.$error.required">Please provide a name.</p>
      <p class="help-block" ng-show="form.$submitted && form.name.$error.maxlength">Name must be shorter than 64 characters.</p>
      <p class="help-block" ng-show="form.$submitted && form.name.$error.validate">{{validationErrorMessage}}</p>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
    <button type="submit" class="btn btn-primary">OK</button>
  </div>
</form>
